<!--企业文化-->
<template>
  <div class="addInformation">
    <div class="opNoticeTop">
      <div class="title">
        <div class="searchBox">
          <div><input type="text" placeholder="输入标题" v-model="titleVal"></div>
          <el-button type="primary" size="medium" @click="searchClick">查询</el-button>
        </div>
        <el-button type="primary" class="addClass" size="medium" @click="addClick">添加文档</el-button>
      </div>
    </div>
    <ul class="opNoticeMain" v-loading="opNoticeMainLoading">
      <li class="firstLi">
        <div>标题</div>
        <div>修改时间</div>
        <div>阅读次数</div>
        <div>显示</div>
        <div>排序</div>
        <div>操作</div>
      </li>
      <li class="dataLi" v-show="dataArr.length > 0" v-for="(item,index) in dataArr" :key="index">
        <div>{{item.title | strFun}}</div>
        <div>{{item.updateTime | timeFun}}</div>
        <div>{{item.readNumber}}</div>
        <div @click="showClick(index)">
          <img v-show="item.whetherShow == 1" src="/static/img/blue.png" alt="">
          <img v-show="item.whetherShow == 0" src="/static/img/closeBlue.png" alt="">
        </div>
        <div>
          <img v-show="index == 0" @click="upMaxClick" src="/static/img/grayup.png" alt="">
          <img v-show="index != 0" @click="upClick(index)" src="/static/img/up.png" alt="">
          <img v-show="dataArr.length != index+1" @click="downClick(index)" src="/static/img/down.png" alt="">
          <img v-show="dataArr.length == index+1" @click="downMaxClick" src="/static/img/graydown.png" alt="">
        </div>
        <div class="operate">
          <img @click="ucompileClick(index)" src="/static/img/编辑.png" alt="">
          <img @click="deleteClick(index)" src="/static/img/删除.png" alt="">
          <img @click="detailClick(index)" src="/static/img/查看.png" alt="">
        </div>
      </li>
      <li class="lastLi" v-show="dataArr.length > 0">
        <div class="lastLiLeft">
        </div>
        <div id="lastLiRight">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
            :current-page="currentPage" layout="total, prev, pager, next" :total="totalNum">
          </el-pagination>
        </div>
      </li>
      <li class="noList" v-show="dataArr.length == 0">
        <div>暂无数据</div>
      </li>
    </ul>
    <!-- 删除弹框 --> 
    <v-infoDel :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="delClick" @cancel="cancleClick"></v-infoDel>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import infoDel from "../../../cModel/infoDel";
export default {
  components: {
    "v-infoDel": infoDel
  },
  data() {
    return {
      opNoticeMainLoading: true,
      deleteBoxShow: false,
      delTostVal: "",
      titleVal: "",
      dataIdArr: [],
      dataArr: [],
      isShow: true,
      orgIdVal: "",
      catalogIdVal: "",
      parentIdVal: "",
      showClickTrueOrFalse: true,
      idVal: "",
      whetherShowVal: "",
      upClickTrueOrFalse: true,
      downClickTrueOrFalse: true,
      idTwoVal: "",
      delClickTrueOrFalse: true,
      obj: {},
      currentPage: 1,
      pageSizeNum: 10,
      totalNum: 10
    };
  },
  filters: {
    // 字符串
    strFun: function(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    },
    // 返回时间过滤
    timeFun: function(val) {
      if (val) {
        val = Number(val);
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    var self = this;
    self.orgIdVal = sessionStorage.getItem("ORGID");
    self.IdlistFun();
  },
  mounted() {},
  methods: {
    // 目录结构列表
    IdlistFun() {
      var self = this;
      self.opNoticeMainLoading = true;
      self
        .getWebInfoParent({
          orgId: self.orgIdVal
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataIdArr = data.data;
              self.parentIdVal = self.dataIdArr[0].id;
              self.listFun();
            } else {
              self.opNoticeMainLoading = false;
            }
          } else if (data.statusCode == "200003") {
            self.opNoticeMainLoading = false;
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.opNoticeMainLoading = false;
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.opNoticeMainLoading = false;
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 列表
    listFun() {
      var self = this;
      self.obj = {
        pageNo: self.currentPage,
        pageSize: self.pageSizeNum,
        orgId: self.orgIdVal,
        parentId: self.parentIdVal,
        title: self.titleVal
      };
      self
        .getWebInfoList(self.obj)
        .then(data => {
          self.opNoticeMainLoading = false;
          if (data.statusCode == 200) {
            if (data.data) {
              self.totalNum = Number(data.data.total);
              self.pageSizeNum = Number(data.data.size);
              self.currentPage = Number(data.data.current);
              if (data.data.records) {
                self.dataArr = data.data.records;
              } else {
                self.dataArr = [];
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.opNoticeMainLoading = false;
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 搜索
    searchClick() {
      var self = this;
      if (self.titleVal.length == 0) {
        self.$message({
          type: "info",
          message: "请先输入搜索关键字！"
        });
      } else {
        self.listFun();
      }
    },
    // 分页-每页条数
    handleSizeChange(val) {
      var self = this;
      self.pageSizeNum = val;
      self.listFun();
    },
    // 分页-当前页
    handleCurrentChange(val) {
      var self = this;
      self.currentPage = val;
      self.listFun();
    },
    // 添加文档
    addClick() {
      var self = this;
      self.$router.push({
        path: "/home/information/addenterpriseformation"
      });
      sessionStorage.setItem("catalogIdVal", self.parentIdVal);
    },
    // 显示
    showClick(index) {
      var self = this;
      if (self.showClickTrueOrFalse == true) {
        self.showClickTrueOrFalse = false;
        self.idVal = self.dataArr[index].id;
        if (self.dataArr[index].whetherShow == 0) {
          self.whetherShowVal = 1;
        } else {
          self.whetherShowVal = 0;
        }
        self
          .getWebInfoShowHide({
            orgId: self.orgIdVal,
            id: self.idVal,
            whetherShow: self.whetherShowVal
          })
          .then(data => {
            self.showClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "操作成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusCode
              });
            }
          })
          .catch(msg => {
            self.showClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 向上排序
    upClick(index) {
      var self = this;
      if (self.upClickTrueOrFalse == true) {
        self.upClickTrueOrFalse = false;
        self.idVal = self.dataArr[index].id;
        self.idTwoVal = self.dataArr[index - 1].id;
        self
          .getWebInfoSort({
            orgId: self.orgIdVal,
            id1: self.idVal,
            id2: self.idTwoVal
          })
          .then(data => {
            self.upClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "排序成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.upClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 向下排序
    downClick(index) {
      var self = this;
      if (self.downClickTrueOrFalse == true) {
        self.downClickTrueOrFalse = false;
        self.idVal = self.dataArr[index].id;
        self.idTwoVal = self.dataArr[index + 1].id;
        self
          .getWebInfoSort({
            orgId: self.orgIdVal,
            id1: self.idVal,
            id2: self.idTwoVal
          })
          .then(data => {
            self.downClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "排序成功"
              });
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.downClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 排序-最上面
    upMaxClick() {
      var self = this;
      self.$message({
        type: "info",
        message: "已排在最上面，不能再向上排序"
      });
    },
    // 排序-最下面
    downMaxClick() {
      var self = this;
      self.$message({
        type: "info",
        message: "已排在最下面，不能再向下排序"
      });
    },
    // 编辑
    ucompileClick(index) {
      var self = this;
      self.$router.push({
        path: "/home/information/compileenterpriseformation"
      });
      sessionStorage.setItem("catalogIdVal", self.parentIdVal);
      sessionStorage.setItem("idVal", self.dataArr[index].id);
    },
    // 查看
    detailClick(index) {
      var self = this;
      self.idVal = self.dataArr[index].id;
      self.$router.push({
        path: "/home/information/detailenterpriseformation",
        query: { id: self.dataArr[index].id }
      });
    },
    // 删除
    deleteClick(index) {
      var self = this;
      self.delTostVal = "确定要删除该条资讯吗？";
      self.deleteBoxShow = true;
      self.idVal = self.dataArr[index].id;
    },
    // 确定删除
    delClick() {
      var self = this;
      if (self.delClickTrueOrFalse == true) {
        self.delClickTrueOrFalse = false;
        self
          .getWebInfoDelete({
            orgId: self.orgIdVal,
            id: self.idVal
          })
          .then(data => {
            self.delClickTrueOrFalse = true;
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "删除成功"
              });
              self.deleteBoxShow = false;
              self.listFun();
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.delClickTrueOrFalse = true;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 取消删除
    cancleClick() {
      var self = this;
      self.deleteBoxShow = false;
    },
    ...mapActions([
      "getWebInfoParent",
      "getWebInfoList",
      "getWebInfoShowHide",
      "getWebInfoSort",
      "getWebInfoDelete"
    ])
  },
  watch: {
    titleVal(val) {
      var self = this;
      if (val.length == 0) {
        self.listFun();
      }
    }
  }
};
</script>
<style scoped>
.addInformation {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop {
  width: 100%;
  margin-top: 18px;
  margin-left: 44px;
  margin-bottom: 23px;
}

.opNoticeTop .title input {
  width: 170px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #38adff;
  border-radius: 4px;
  padding-left: 12px;
}

.opNoticeMain div {
  overflow: hidden;
}

.opNoticeTop .title {
  display: flex;
  justify-content: space-between;
}

.opNoticeTop .addClass {
  margin-right: 90px;
}

.title .searchBox > div:nth-child(2) {
  width: 70px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  background: #38adff;
  cursor: pointer;
}

.title .searchBox {
  display: flex;
  align-items: center;
  width: 280px;
  justify-content: space-between;
}

.opNoticeMain .firstLi {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}

.opNoticeMain .firstLi > div {
  width: 16%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #d1d1d1;
  background: #f1f1f1;
  font-size: 16px;
  font-weight: bold;
}

.opNoticeMain .firstLi > div:nth-child(6) {
  width: 20%;
}

.dataLi {
  display: flex;
  /* border-left: 1px solid #d1d1d1; */
  /* border-bottom: 1px solid #d1d1d1; */
  width: 100%;
}
.firstLi > div:nth-child(1),
.dataLi > div:nth-child(1) {
  border-left: 1px solid #d1d1d1;
}
.dataLi > div {
  width: 16%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataLi > div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

img {
  cursor: pointer;
}

.dataLi .operate {
  display: flex;
  width: 20%;
  align-items: center;
  justify-content: space-around;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
  min-height: 400px;
}

.lastLi > div:nth-child(1) {
  width: 10px;
}

.lastLi > div:nth-child(2) {
  width: 80%;
  display: flex;
  justify-content: flex-end;
}

.lastLi {
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.noList {
  width: 100%;
  text-align: center;
  height: 400px;
  line-height: 400px;
  font-size: 25px;
  color: #c1c1c1;
  /* background: #f1f1f1; */
}
</style>